<template>
	<!-- 门店信息 -->
	<view class="storeInformation-main">
		<view class="storeInformation-info">
			<view class="storeInformation-image">
				<image :src="imageUrls(storeInfo.image)" class="images"></image>
			</view>
			<view class="storeInformation-infos">
				<view class="info-name">{{ storeInfo.name || '暂无名称' }}</view>
				<view class="info-acc">门店地址：{{ storeInfo.address || '暂无地址' }}</view>
			</view>
		</view>
		
		<uni-notice-bar show-icon text="提示门店入驻成功，会自动开通第三方配送和第三方分账功能" />

		<!-- 联系方式 -->
		<view class="clerkManage-options">
			<view class="clerkManage-option" style="margin-top: 30rpx; padding-top: 10rpx">
				<view class="option-item">
					<view class="option-item-icon">
						<uni-icons type="person-filled" size="22"></uni-icons>
					</view>
					<view class="option-item-title">联系人</view>
					<view class="option-item-icons">
						{{storeInfo.contact_name || '暂无联系人'}}
					</view>
				</view>
				<view class="option-item">
					<view class="option-item-icon">
						<uni-icons type="phone-filled" size="22"></uni-icons>
					</view>
					<view class="option-item-title">联系电话</view>
					<view class="option-item-icons">
						{{storeInfo.contact_phone || '暂无联系电话'}}
					</view>
				</view>
			</view>
		</view>

		<!-- 门店信息 -->
		<view class="clerkManage-options">
			<view class="clerkManage-option" style="margin-top: 30rpx">
				<view class="clerkManage-option-header">门店信息</view>
				<view class="storeMap">
					<map name="storeMap" :longitude="storeInfo.lng" :latitude="storeInfo.lat" :markers="markers" scale="14" style="width: 100%"></map>
				</view>
				<view class="storeAddress">
					<uni-icons type="location" size="20" style="margin-right: 6rpx"></uni-icons>
					<text>
						{{ storeInfo.address }}
					</text>
				</view>
			</view>
		</view>
		
		<u-button type="primary" color="#2979ff" text="编辑门店信息" shape="circle" @click="gotoPath"></u-button>
	</view>
</template>

<script>
import { imageUrl } from '../../../utils/tools';
import { flashManageInfo } from '../../../api/flashManage/index.js';
export default {
	data() {
		return {
			storeInfo: {},
			markers: []
		};
	},
	onShow() {
		this.getflashManageInfo();
	},
	methods: {
		imageUrls(fileUrl) {
			return imageUrl(fileUrl);
		},
		
		// 门店信息获取
		async getflashManageInfo() {
			try {
				const resData = await flashManageInfo({
					type: this.$store.state.storeType
				});
				this.storeInfo = resData.data;
				this.markers = [{
					id: 0,
					latitude: this.storeInfo.lat,
					longitude: this.storeInfo.lng,
					width: 30,
					height: 30,
				}]
			} catch (e) {
				throw Error(e);
			}
		},
		
		gotoPath(){
			const type = this.$store.state.storeType;
			if(type == 1){
				uni.navigateTo({
					url:'/pages/storeSide/flashStoreEdit/flashStoreEdit?type=eidt'
				})
			}else if(type == 0){
				uni.navigateTo({
					url:'/pages/storeSide/cloudStoreEdit/cloudStoreEdit?type=eidt'
				})
			}
		}
	}
};
</script>

<style scoped lang="scss">
.storeInformation-main {
	box-sizing: border-box;
	padding: 30rpx;
	.storeInformation-info {
		display: flex;
		height: 120rpx;
		margin-bottom: 30rpx;
		.storeInformation-image {
			width: 140rpx;
			.images {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
		}

		.storeInformation-infos {
			display: flex;
			flex-direction: column;
			flex: 1;
			.info-name {
				font-size: 30rpx;
				font-weight: bold;
				height: 60rpx;
			}

			.info-acc {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.clerkManage-options {
		.clerkManage-option {
			background-color: #fff;
			border-radius: 24rpx;
			padding: 30rpx;
			padding-bottom: 0px;
			margin-bottom: 30rpx;
			.clerkManage-option-header {
				margin-bottom: 20rpx;
				font-weight: bold;
			}
			.storeMap {
				margin-top: 20rpx;
			}
			.storeAddress {
				display: flex;
				align-items: center;
				height: 80rpx;
				font-size: 24rpx;
				margin-top: 20rpx;
				color: #999;
			}
			.option-item {
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px #f3f3f3 solid;
				font-size: 28rpx;
				.option-item-icon {
					width: 55rpx;
				}
				.option-item-title {
					flex: 1;
				}
				.option-item-icons {
					width: 200rpx;
					text-align: right;
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
}
</style>
